qx.Class.define("bip.ui.categories.CategoryView",
{
  extend : qx.ui.core.Widget,
  include : [qx.ui.form.MModelProperty],

  construct : function()
  {
    this.base(arguments);
    
    // initialize the layout
    var layout = new qx.ui.layout.Grid();
    this._setLayout(layout);
    layout.setRowAlign(1,"right","middle");
    
    // create the widgets
    this._createChildControl("description-prefix");
    this._createChildControl("description");
    this._createChildControl("slider-prefix");
    this._createChildControl("slider");
    //this._createChildControl("choice");
    //this._add(new qx.ui.form.Slider(),{row:3,column:3});

  },

  properties :
  {
  	appearance :
    {
      refine : true,
      init : "category-view"
    },
    
    description :
    {
      check : "String",
      apply : "_applyDescription",
      init : "Description"
    },
    
    minvalue :
    {
      check : "Integer",
      apply : "_applyMinvalue",
      init : 0
    },
    
    maxvalue : {
    	check: "Integer",
    	 apply : "_applyMaxvalue",
       init : 10
    }
   
  },

  members :
  { 
    // overridden
    _createChildControlImpl : function(id)
    {
      var control;

      switch(id)
      {      
      	case "description-prefix":
      		control = new qx.ui.basic.Label("Q.");
      		control.setAnonymous(true);
          this._add(control,{row:0,column:0});
          break;
          
      	case "slider-prefix":
      		control = new qx.ui.basic.Label("Answer:");
      		control.setAnonymous(true);
          this._add(control,{row:1,column:0});
          break;
      		
        case "description":
          control = new qx.ui.basic.Label(this.getDescription());
          control.setAnonymous(true);
          control.setRich(true);
          this._add(control,{row:0,column:1});
          break;
          
        case "slider":
        	// Add minValue, maxValue and current value upside the slider 
        	var grid = new qx.ui.layout.Grid();
          var container = new qx.ui.container.Composite(grid);
          container.setPadding(20);
          container.setWidth(400);
          container.setHeight(40);
          grid.setSpacing(5);
          grid.setColumnFlex(0, 1);
          grid.setColumnFlex(1, 1);
          grid.setColumnFlex(2, 1);
          grid.setColumnAlign(0, "left", "bottom");
          grid.setColumnAlign(1, "center", "bottom");
          grid.setColumnAlign(2, "right", "bottom");
          // Create the slider and the labels
          var slider = new qx.ui.form.Slider();
          slider.setHeight(20);
          slider.setKnobFactor(0.1);
          var minimumLabel = new qx.ui.basic.Label();
          var maximumLabel = new qx.ui.basic.Label();
          var valueLabel = new qx.ui.basic.Label();
          // Now build the widget
          var row = 0;
          slider.setOrientation("horizontal");
          valueLabel.setWidth(100);
          valueLabel.setTextAlign("center");
          container.add(minimumLabel, {row: row, column: 0});
          container.add(valueLabel, {row: row, column: 1});
          container.add(maximumLabel, {row: row, column: 2});
          container.add(slider, {row: row+1, column: 0, colSpan: 3, rowSpan: 1});
          grid.setRowHeight(row+2, 20);
          // Binding
          slider.bind("value",valueLabel,"value");
          slider.bind("minimum",minimumLabel,"value");
          slider.bind("maximum",maximumLabel,"value");
          control = slider ;
          
          this._add(container,{row:1,column:1});
          break;
      }

      return control || this.base(arguments, id);
    },
    
    // property apply
    _applyDescription : function(value, old)
    {
      var desc = this.getChildControl("description");
      desc.setValue(value);
    },
    
    // property apply
    _applyMinvalue : function(value, old)
    {
    	if (this.getChildControl("slider").getMaximum() < value) {
    		this.getChildControl("slider").setMaximum(value);
    	}
    	if (this.getChildControl("slider").getValue() < value) {
    		this.getChildControl("slider").setValue(value);
    	}
      this.getChildControl("slider").setMinimum(value);
    },
    
    // property apply
    _applyMaxvalue : function(value, old)
    {
    	if (this.getChildControl("slider").getMinimum() > value) {
    		this.getChildControl("slider").setMinimum(value);
    	}
    	if (this.getChildControl("slider").getValue() > value) {
    		this.getChildControl("slider").setValue(value);
    	}
      this.getChildControl("slider").setMaximum(value);
    }
    
  },
  
  destruct : function()
  {
    
  }
});